<template>
    <div class="hader_top">
        <router-link to="/"> 
              <div  class="hader_top_img">
                  <img src="../../assets/logo.png" alt=""  class="hader_top_img_img">
               </div>
        </router-link>
                  <span class="hader_top_font">积云会员管理系统</span>
         <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{this.kerunt.name}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-edit" command="changePassWord">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-fold" command="loginOut">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
       

<script>
import loginApi from '../../api/login'
    export default {
          data(){
             return{
               kerunt:{}
             }
          },
         mounted(){
            let json = localStorage.getItem('adminInfo')
              this.kerunt =JSON.parse(json)

         },
         methods: {
           handleCommand(command){
            //  window.console.log(command)
            switch(command){
              case "changePassWord" :
               this.changePassWord() 
                break;
                case "loginOut" :
                this.loginOut()
                break;
               default:
                break;
            }
           },
          changePassWord(){
            alert("nijsdd")
          },
          loginOut(){
            const token =localStorage.getItem('adminToken');
            loginApi.loginOut(token).then((response)=>{
               const res = response.data
               if(res.flag){
                //  window.console.log(res)
                 //清除本地存储的用户信息
                 localStorage.removeItem("adminToken")
                 localStorage.removeItem("adminInfo")
                 this.$router.push('/')
               }else{
                  this.$message({
                    message: res.message,
                    type: 'warning'
                  });
               }
             })
           }
         },
    }
</script>

<style>
.hader_top
{
    background:#2d3a4b;
   line-height: 50px;
   height: 50px;
    position: absolute;
     left: 0;
     top: 0;
     right: 0;
}
.hader_top_img
{
 width: 30px;
 height: 30px;
 /* background: wheat;    */
  position: relative;
  left:30px;
  top:10px;
  float: left;
}
.hader_top_img_img
{
 width: 100%;
 height: 100%;   
}


.hader_top_font
{
 color: white; 
 margin-left:40px;
text-decoration:none;
}
.el-dropdown
{
  float: right;
  padding-right:40px;
  color:white; 
}
.el-dropdown-link{
    cursor: pointer;
}

</style>